<template>
  	<div class="settlement-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>财务中心</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/information' }">结算中心</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/information' }">提现资料</el-breadcrumb-item>
		</el-breadcrumb>
    <div class="settlement-content">
      <el-form  ref="ruleFormRef"  style="max-width: 600px;position: relative;"  :model="ruleForm"  :rules="rules"  label-width="auto"  class="demo-ruleForm"    status-icon>
        <el-form-item label="请选择提现人" prop="person">
          <el-radio-group v-model="ruleForm.person" @change="changePerson">
            <el-radio value="0">法人</el-radio>
            <el-radio value="1">委托人</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="营业执照" prop="licenseImg" style="display: flex;">
          <div class="dfc">
            <el-upload  class="avatar-uploader"  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"  :show-file-list="false"  :on-success="handleAvatarSuccess"  :before-upload="beforeAvatarUpload">
              <img v-if="ruleForm.licenseImg" :src="ruleForm.licenseImg" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <span class="tip">支持 .jpg .jpeg .png 格式，小于1M。</span>
          </div>
        </el-form-item>
        <el-form-item label="代收结算公函" prop="OfficialImg" v-if="personType" style="position: absolute;left: 440px;top:46px;width:100%">
          <div class="dfc" >
            <el-upload  class="avatar-uploader"  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"  :show-file-list="false"  :on-success="handleAvatarSuccess"  :before-upload="beforeAvatarUpload">
              <img v-if="ruleForm.OfficialImg" :src="ruleForm.OfficialImg" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <div class="tip">需绑定的提现微信和支付宝非法人所有时，请填写委托提现协议并上传。
              <span class="download">下载公函</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="personType ? '委托人身份证' : '法人身份证'" prop="IDCard">
          <div class="dfc">
            <div class="df">
              <el-upload  class="avatar-uploader"  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"  :show-file-list="false"  :on-success="handleAvatarSuccess"  :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.IDCard" :src="ruleForm.IDCard" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                <div class="upload-text"> 正面</div>
              </el-upload>
              <el-upload style="margin-left:20px"  class="avatar-uploader"  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"  :show-file-list="false"  :on-success="handleAvatarSuccess"  :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.IDCard" :src="ruleForm.IDCard" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                <div class="upload-text">反面</div>
              </el-upload>
            </div>
            <span class="tip">请上传法人身份证正反面；支持 .jpg .jpeg .png 格式，小于1M。</span>
          </div>
        </el-form-item>
        <el-form-item :label="personType ? '委托人姓名' : '法人姓名'" prop="IDCardN">
          <el-input v-model="ruleForm.name" placeholder="请输入法人真实姓名"/>
        </el-form-item>
        <el-form-item :label="personType ? '委托身份证号' : '法人身份证号'" prop="IDCardNo">
          <el-input v-model="ruleForm.IDCardNo" placeholder="请输入法人身份证号"/>
        </el-form-item>
        <el-form-item label="常用电话" prop="tel">
          <el-input v-model="ruleForm.tel" placeholder="请输入电话号码"/>
          <span class="tip">提示：审核人员可能会电话跟您核对信息，请正确填写联系电话</span>
        </el-form-item>
        <el-form-item label="微信绑定" prop="qrcode">
          <div class="dfc">
            <el-image style="width: 100px; height: 100px" src="/src/assets/finance/code.png" :fit="fit" />
            <div class="tip">提示：使用法人的实名认证并绑定银行卡的微信扫码</div>
          </div>
        </el-form-item>
        <el-form-item label="支付宝注册时的帐号" prop="alipayAccount">
          <el-input v-model="ruleForm.alipayAccount" placeholder="请输入法人的实名认证的支付宝账号"/>
          <div class="download" @click="showExample()">查看示例</div>
        </el-form-item>
        <el-form-item label="银行名称" prop="bankName" >
          <el-input v-model="ruleForm.bankName" placeholder="请输入银行名称、支行名称"/>
        </el-form-item>
        <el-form-item label="银行账号" prop="bankNo">
          <el-input v-model="ruleForm.bankNo" placeholder="请输入银行账号"/>
        </el-form-item>
        <div class="save">
          <el-button round color="#0071bb" @click="submitForm(ruleFormRef)">保存</el-button>
        </div>
      </el-form>
    </div>
    <!-- 示例 -->
    <div class="example" v-if="show">
      <div class="title">支付宝账号示例</div>
      <img src="/src/assets/finance/example.png" alt="" style="width:400px;">
      <div class="btn">
        <el-button round color="#0071bb" @click="closeExample()">确定</el-button>
        <el-button round @click="closeExample()">取消</el-button>
      </div>
    </div>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { ElMessage } from 'element-plus'
interface RuleForm {
  person: string
  licenseImg: string
  OfficialImg: string
  IDCard: string
  name: string
  IDCardNo: string
  tel:string
  qrcode: string
  alipayAccount: string
  bankName: string
  bankNo: string
}
// 委托人类型 0:法人 1:委托人
const personType = ref(0)
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  person: '0',
  licenseImg: '',
  OfficialImg: '',
  IDCard: '',
  name: '',
  IDCardNo: '',
  tel:'',
  qrcode: '',
  alipayAccount: '',
  bankName: '',
  bankNo: '',
})
// 校验
const rules = reactive<FormRules<RuleForm>>({
  person: [
    { required: true, message: '请选择提现人', trigger: 'blur' },
  ],
  licenseImg: [
    { required: true, message: '请上传营业执照', trigger: 'blur' },
  ],
  OfficialImg: [
    { required: true, message: '请上传委托提现协议', trigger: 'blur' },
  ],
  IDCard: [
    { required: true, message: '请上传身份证', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请填写姓名', trigger: 'blur' },
  ],
  IDCardNo: [
    { required: true, message: '请填写身份证号', trigger: 'blur' },
  ],
  qrcode: [
    { required: true, message: '请绑定二维码', trigger: 'blur' },
  ],
  alipayAccount: [
    { required: true, message: '请填写支付宝账号', trigger: 'blur' },
  ],
  bankName: [
    { required: true, message: '请输入银行名称，支行名称', trigger: 'blur' },
  ],
  bankNo: [
    { required: true, message: '请输入银行账号', trigger: 'blur' },
  ],
  tel:[
  { required: true, message: '请输入电话号码', trigger: 'blur' },
  ]
})
// 保存
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const imageUrl = ref('')
// 上传成功
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}
// 上传前
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
// 改变提现人
const changePerson = (value:string) => {
  personType.value = Number(value)
}
// 显示示例
const show = ref<string>(false)
// 查看示例
const showExample = () => {
  show.value = true
}
// 关闭示例
const closeExample = () => {
  show.value = false
}
</script>

<style scoped lang="scss">
.settlement-page{
	padding: 20px 10px;
	box-sizing: border-box;
  background-color: #f1f1f1;
}
.settlement-content{
	padding: 10px;
  background:#fff;
  margin-top:20px;
  border-radius:4px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.dfc{
  display:flex;
  flex-direction:column;
}
.df{
  display:flex;
}
.download{
  color: blue;
  font-size: 12px;
  cursor: pointer;
}
.tip{
  color: #808080;
  font-size: 12px;
}
.save{
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}
.example{
  position: absolute;
  left: 660px;
  bottom: 200px;
  .title{
    font-size: 12px;
    margin-bottom: 10px;
  }
  .btn{
    width: 100%;
    text-align: right;
    margin-top: 10px;
  }
}
.upload-text{
  position: absolute;
  bottom: 30px;
  color: #808080;
}

</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  background: #e5e5e5;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>